@import '../Login/index.less';

.container {
  .content {
    .form {
      width: 500px;
      
      :global {
        .ant-card-body {
          padding: 40px;
        }

        .ant-pro-form {
          width: 100%;
        }
        
        .ant-card-head {
          padding: 0 40px;
          min-height: 48px;
          border-bottom: none;
          
          .ant-card-head-title {
            padding: 12px 0;
            
            a {
              color: #DD2476;
              font-size: 15px;
              transition: all 0.3s;
              
              &:hover {
                color: #FF512F;
              }
            }
          }
        }
        
        .ant-form {
          .ant-form-item {
            margin-bottom: 24px;

            .ant-form-item-label {
              text-align: right;
              padding-right: 16px;
              
              > label {
                color: #666;
                font-size: 15px;
                height: 42px;
                line-height: 42px;
              }
            }

            .ant-form-item-control {
              .ant-form-item-control-input {
                min-height: 42px;
              }
            }
          }
        }

        .ant-input-affix-wrapper {
          height: 42px;
          border-radius: 12px;
          border: 1px solid #eee;
          padding: 8px 16px;
          
          &:hover, &-focused {
            border-color: #DD2476;
            box-shadow: 0 0 0 2px rgba(221, 36, 118, 0.1);
          }

          .ant-input-prefix {
            margin-right: 10px;
            color: #999;
          }
        }

        .ant-btn-primary {
          margin-top: 20px;
        }
      }
    }
  }
}

.registerHeader {
  text-align: center;
  margin-bottom: 36px;
  
  h1 {
    font-size: 32px;
    background: linear-gradient(45deg, #FF512F, #DD2476);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
    font-weight: 600;
  }
}

.formSelect {
  width: 100%;
}
  